<template>
	<view>
		<!-- swiper -->
		<view class="">
			<!-- swiper -->
			<view class="swiper"
				style="display: flex;align-items: center;justify-content: center;width: 375px;height: 130px;">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" style="width: 375px;height: 130px;"
					mode=""></image>
				<!-- 				<image :src="form.uproductPic ||'https://cdn.uviewui.com/uview/swiper/swiper1.png'"
					style="width: 375px;height: 130px;" mode=""></image> -->
			</view>
		</view>
		<u-gap bgColor="transparent" height="15"></u-gap>
		<!-- 标题 -->
		<view class="margin">
			<view class="flex-between" style="height: 50rpx;align-items: center;">
				<view class="color_orange size_14">
					￥{{form.uretailPrice || 299.00}}
				</view>
				<view class="size_13 color_grey">
					{{form.salesQuantity || 1}}
				</view>
			</view>
			<view class="size_17 font_b ms6 mt9" style="margin-bottom: 12rpx;margin-top: 18rpx;">
				{{form.uproductName || '东阿阿胶 阿胶 250g/盒 阿胶块补血滋阴止血'}}
			</view>
			<view class="flex-between ms20">
				<view class="flex-cen">
					<image src="/static/img//goodsdetail/03-shan.png" mode="widthFix"
						style="width: 24rpx;height: 24rpx"></image>
					<view class="size_12 ml5">
						急速送达
					</view>
				</view>
				<view class="flex-cen">
					<image src="/static/img//goodsdetail/04-zhen.png" mode="widthFix"
						style="width: 24rpx;height: 24rpx"></image>
					<view class="size_12 ml5">
						正品保障
					</view>
				</view>
				<view class="flex-cen">
					<image src="/static/img//goodsdetail/05-dui.png" mode="widthFix" style="width: 24rpx;height: 24rpx">
					</image>
					<view class="size_12 ml5">
						药监认证
					</view>
				</view>
			</view>
		</view>

		<view class="line">

		</view>
		<!-- 适应症 -->
		<view class="margin">
			<view class="ms10" style="display: flex;justify-items: center;align-items: center;padding-top:30rpx;">
				<view class="left-line mr10"></view>
				<view class="size_15 color_black">适应症</view>
			</view>
			<view class="ms15">
				{{form.adaptSymptom || 'XXX'}}
			</view>
		</view>
		<!--  -->
		<view class="line">
		</view>
		<!-- 规格 -->
		<view class="">
			<u-cell-group>
				<u-cell isLink>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text mr30 size_13 color_grey">规格</text>
						<text class="u-cell-text size_13">{{form.uproductSpecs || 'XXX'}}</text>
					</view>
				</u-cell>
				<u-cell isLink>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text mr30 size_13 color_grey">用量</text>
						<text class="u-cell-text size_13">{{form.usageMethod || 'XXX'}}</text>
					</view>
				</u-cell>
				<u-cell value="">
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text mr30  size_13  color_grey">配送</text>
						<text class="u-cell-text  size_13">顺丰配送</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>

		<view class="line">

		</view>
		<!-- 说明书 -->
		<view class="margin">
			<view class="ms10" style="display: flex;justify-items: center;align-items: center;padding-top:30rpx;">
				<view class="left-line mr10"></view>
				<view class="size_15 color_black">说明书</view>
			</view>
			<view class="ms15 demo-layout">
				为了您的用药安全,请仔细阅读使用说明书并按说明使用或在药师指导下购买和使用，药品不支持7天无理由退换货。
			</view>
			<view class="">
				<u-row customStyle="margin-bottom: 20rpx">
					<u-col span="5">
						<view class="demo-layout bg-purple-light">主要成分</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple">{{form.adaptSymptom}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20rpx">
					<u-col span="5">
						<view class="demo-layout bg-purple-light">用药禁忌</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple">{{form.medicineContraindication }}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20rpx">
					<u-col span="5">
						<view class="demo-layout bg-purple-light">不良反应</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple">{{form.adverseEffect }}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20rpx">
					<u-col span="5">
						<view class="demo-layout bg-purple-light">药物相互作用</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple">如与其他药品同时使用产生可能会发生
							药物相互作用，详情咨询医生</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20rpx">
					<u-col span="5">
						<view class="demo-layout bg-purple-light">注意事项</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple">
							{{form.umattersAttention}}
						</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20rpx">
					<u-col span="5">
						<view class="demo-layout bg-purple-light">药物毒性</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple">
							{{form.medicineToxicity}}
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="line">

		</view>

		<!-- 购买须知 -->
		<view class="margin">
			<view class="ms10" style="display: flex;justify-items: center;align-items: center;padding-top:30rpx;">
				<view class="left-line mr10"></view>
				<view class="size_15 color_black">购买须知</view>
			</view>
			<view class="ulul  demo-layout">
				<ul>
					<li>
						<view class="mt6 ms6">
							发货须知
						</view>
						<view class="bg-purple-light">
							<view class="">
								1. 本店为您选择默认的快递公司，不接受指定快递，如因
								天气等不可控造成物流较慢，敬请原谅。
							</view>
							<view class="">
								2. 私密发货，包裹不泄露任何产品信息，请放心购买。
							</view>
							<view class="">
								3. 智云药房商品均由益丰大药房发货。
							</view>
						</view>
					</li>
					<li class="ms20">
						<view class="mt6 ms6">
							发票及退换货
						</view>
						<view class="bg-purple-light">
							<view class="">
								1. 本店开具正规税务发票，如需发票，请联系商家。
							</view>
							<view class="">
								2. 非药品商品在包装未损失不影响二次销售的情况下支持
								7天无理由退换货，因买家个人原因而选择退货，运费由买
								家承担。
							</view>
							<view class="">
								3. 根据国家药监局GSP规定，药品一旦售出非质量问题不
								予退换，给您带来不便敬请原谅。
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>

		<view class="line">

		</view>
		<!-- 底部 -->
		<view class="margin" style="height: 150rpx;">
			<view class="">
				<view class="flexflex" style="justify-content: space-between;align-items: center;margin-top: 26rpx;">
					<view class="flexflex">
						<!-- 						<view class="align_c mr10 cflex">
							<image class="ms6" src="/static/img/goodsdetail/01-kefu.png" mode="widthFix"
								style="width: 32rpx;height: 32rpx;">
							</image>
							<view class="size_10 color_grey">
								客服
							</view>
						</view> -->
						<view class="align_c cflex">
							<image class="ms6" @click="$pub.go('/pages_shop/shop/shopcart/shopcart')"
								src="/static/img/goodsdetail/02-gowuce.png" alt="" mode="widthFix"
								style="width: 32rpx;height: 32rpx;">
								<view class="size_10 color_grey">
									购物车
								</view>
						</view>
					</view>
					<view class="flex">
						<view class="btn1 flex-cen color_purple" @click="changeCate">
							加入购物车
						</view>
						<view class="btn2 flex-cen color_white" @click="getProductDetail">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* swiper */
				list5: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png",
					"https://cdn.uviewui.com/uview/swiper/swiper2.png",
					"https://cdn.uviewui.com/uview/swiper/swiper3.png",
				],
				current: 0,
				form: {
					uproductid: "1659088089214132224",
					uproductPic: "profile/2023/05/18/20230518144451A039.png",
					uproductName: " ",
					adaptSymptom: null,
					uproductSpecs: " 123",
					umainComponents: " ",
					salesQuantity: 123,
					medicineContraindication: null,
					adverseEffect: null,
					medicineInteraction: null,
					umattersAttention: " 123",
					medicineToxicity: null,
					usageMethod: " 123",
					uretailPrice: 123,
				},
			};
		},
		onLoad(options) {
			// console.log(options, "op");
			this.form.uproductid = options.data;
		},
		onShow() {
			// 别删除
			// this.getProductDetail();
			uni.showToast({
				title: '敬请期待',
				icon: "none"
			})
		},
		methods: {
			async getProductDetail() {
				let re = await this.$API.productApi.getProductDetail(
					this.form.uproductid
				);
				this.form = re;
			},
			async changeCate() {

				let data = {
					// "flag": true,
					uproductid: String(this.form.uproductid),
				};
				await this.$API.cartApi.changeCate(data);
				uni.showToast({
					title: "添加购物车成功",
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 24rpx;
		color: #333;
		word-wrap: break-word;
	}

	// swiper
	/* 自定义指示器 */
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 12rpx;
			width: 12rpx;
			border-radius: 200rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 10rpx;
			transition: background-color 0.3s;

			&--active {
				// background-color: #ffffff;
				background-color: #7976e9;
			}
		}
	}

	.indicator-num {
		padding: 4rpx 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 200rpx;
		width: 70rpx;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	/* 说明书 */
	.demo-layout {
		font-size: 26rpx;
	}

	.bg-purple-light {
		color: #848484;
	}

	/*  购买 */
	.ulul ul {
		padding-left: 32rpx;
	}

	/* btn */
	.btn1 {
		width: 270rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
		opacity: 1;
		border: 2rpx solid #7976e9;
	}

	.btn2 {
		width: 270rpx;
		height: 100rpx;
		background: #7976e9;
		border-radius: 0rpx 50rpx 50rpx 0rpx;
		opacity: 1;
	}
</style>